<template>
    <div class="customize">
        <div class="head">
            <el-button type="primary" @click="addHandle">+新增页面</el-button>
        </div>
        <div class="body" id="customizeBody">
            <el-table border :data="tableData" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :height="tableHeight">
                <el-table-column prop="name" label="页面名称">
                    <template slot-scope="scope">
                        <div class="row">
                            <!-- <span class="logoBox">
                                <img
                                  v-if="scope.row.logo"
                                  :src="scope.row.logo"
                                  alt=""
                                  class="logo"
                                />
                              </span> -->
                            <span class="pageName">{{ scope.row.pageName }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="页面类型">自定义页面
                    <!-- <template slot-scope="scope">
            <div class="row">
              <span class="iconBox">
                <i
                  v-if="scope.row.icon"
                  :class="scope.row.icon"
                  :style="{ backgroundColor: scope.row.iconBgColor }"
                ></i>
              </span>
              <span class="type">{{ scope.row.type }}</span>
            </div>
          </template> -->
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === '应用中'" class="InApplication">{{
              scope.row.status
            }}</span>
                        <span v-if="scope.row.status === '未使用'" class="notUsed">{{
              scope.row.status
            }}</span>
                        <span v-else class="notUsed">未使用</span>
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="修改时间"></el-table-column>
                <el-table-column label="操作" width="220">
                    <template slot-scope="scope">
                        <el-button style="color: #1890ff" icon="el-icon-edit" circle title="点击编辑" @click="editHandle(scope.row)"></el-button>
                        <el-button style="color: #ff1f2c" icon="el-icon-delete" circle title="点击删除" @click="delHandle(scope.row)"></el-button>
                        <el-button style="color: #1890ff" icon="el-icon-paperclip" circle title="点击复制链接" class="copyLink" @click="linkHandle(scope.row)"></el-button>
                        <el-popover placement="top-end" width="175" trigger="click">
                            <div :id="'curQrCode' + scope.row.id"></div>
                            <p style="
                  font-size: 12px;
                  color: #999;
                  text-align: center;
                  padding-top: 10px;
                ">
                                扫描二维码预览
                            </p>
                            <el-button slot="reference" style="color: #1890ff; margin-left: 10px" circle title="预览" @click="qrcodeHandle(scope.row)"><i class="iconfont icon-erweima3"></i></el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pages">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages.currentPage" :page-sizes="pages.pageSizes" :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import tbLogo from "@/static/images/tb.png";
import jdLogo from "@/static/images/jd.png";
import zfbLogo from "@/static/images/zfb.png";
import mtLogo from "@/static/images/mt.png";
import snLogo from "@/static/images/sn.png";
import Bus from "@/utils/bus.js";
import Clipboard from "clipboard";
import QRCode from "qrcodejs2";
import headApi from '@/utils/hade';
import { getToken } from "@/utils/auth";
export default {
    name: "customize",
    data() {
        return {
            pageName: "自定义页面管理列表",
            loading: false,
            tableHeight: 0,
            tableData: [],
            pages: {
                currentPage: 1,
                pageSizes: [10, 20, 30],
                pageSize: 10,
                total: 10,
            },
        };
    },
    created() {},
    props: [],
    components: {},
    mounted() {
        this.$nextTick(() => {
            localStorage.removeItem("decoratePageId");
            localStorage.removeItem("decoratePageNowType");
            if (this.$parent.$parent.$parent.activeName === "customize") {
                this.init();
            } else {
                setTimeout(() => {
                    if (
                        this.$parent.$parent.$parent.activeName === "customize"
                    ) {
                        this.init();
                    }
                }, 1000);
            }
        });
        window.resize = () => {
            this.setTableHeight();
        };
    },
    methods: {
        //初始化
        init() {
            this.getTableList();
            this.setTableHeight();
            setTimeout(() => {
                if (this.tableHeight === 0) {
                    // //console.log("未检索到customizeBody高度");
                    this.setTableHeight();
                }
            }, 200);
        },
        //动态设置表格高度
        setTableHeight() {
            let bodyDom = document.getElementById("customizeBody");
            if (bodyDom && bodyDom.getBoundingClientRect().height) {
                this.tableHeight = bodyDom.getBoundingClientRect().height;
            } else {
                if (this.$parent.$parent.activeName === "customize") {
                    setTimeout(() => {
                        //console.log("customize再次获取table高度");
                        this.setTableHeight();
                    }, 1500);
                }
            }
        },
        //获取列表数据
        getTableList() {
            this.loading = true;
            this.tableData = [];
            //pageType： 0 自定义页面 1 个性化页面
            if (getToken()) {
                this.axios
                    .post(
                        `${headApi}/appPageContent/list`,
                        {
                            "pageType": 0,
                            "tenantId": localStorage.getItem("tenantId"),
                        },
                        { headers: { Authorization: "Bearer " + getToken() } }
                    )
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            // //console.log(res);
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                if (data && data.length > 0) {
                                    //console.log(data);
                                    this.tableData = [];
                                    this.$nextTick(() => {
                                        this.tableData = data;
                                        this.pages.total = data.length;
                                    });
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false;
                    });
            }
        },
        //新增
        addHandle() {
            localStorage.removeItem("decoratePageId");
            localStorage.setItem("decoratePageNowType", "add");
            this.$router.push({
                name: "decorate",
            });
        },
        //编辑
        editHandle(row) {
            //console.log(1);
            localStorage.setItem("decoratePageId", row.id); //console.log(2);
            localStorage.setItem("decoratePageNowType", "edit"); //console.log(3);
            this.$router.push({
                name: "decorate",
            }); //console.log(4);
        },
        //删除
        delHandle(row) {
            this.$confirm("删除后不可恢复, 确定删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    //执行删除的方法
                    this.delPage(row);
                })
                .catch(() => {
                    //console.log("用户点击了取消");
                });
        },
        delPage(row) {
            if (getToken()) {
                this.loading = true;
                this.axios
                    .delete(`${headApi}/appPageContent/${row.id}`, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code == 200) {
                                this.$message.success("删除成功");
                                setTimeout(() => {
                                    this.getTableList();
                                }, 1500);
                            } else {
                                this.$message.warning(msg);
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },
        //点击复制链接
        linkHandle(row) {
            let that = this;
            var clipboard = new Clipboard(".copyLink", {
                text: function () {
                    return row.link || "目前还没有网址";
                },
            });
            clipboard.on("success", (e) => {
                // //console.log(e);
                that.$message({ message: "复制成功", type: "success" });
                // 释放内存
                clipboard.destroy();
            });
            clipboard.on("error", (e) => {
                // //console.log(e);
                // 不支持复制
                that.$message({
                    message: "该浏览器不支持自动复制",
                    type: "warning",
                });
                // 释放内存
                clipboard.destroy();
            });
        },
        //页面预览二维码
        qrcodeHandle(row) {
            const domId = "curQrCode" + row.id;
            document.getElementById(domId).innerHTML = "";
            new QRCode(domId, {
                render: "canvas",
                width: 150,
                height: 150,
                text: row.link || "http://laxin.91weiduan.cn/",
                colorDark: "#000000",
                colorLight: "#ffffff",
            });
        },
        //切换每页展示多少条数据
        handleSizeChange(pageSize) {
            this.pages.pageSize = pageSize;
            this.getTableList();
        },
        //点击分页
        handleCurrentChange(page) {
            this.pages.currentPage = page;
            this.getTableList();
        },
    },
    computed: {},
    watch: {},
};
</script>
<style scoped lang="scss">
.customize {
    height: 100%;
    .head {
        margin-bottom: 15px;
    }
    .body {
        height: calc(100% - 98px);
        margin-bottom: 15px;
        .el-table {
            height: 100%;
            .row {
                display: flex;
                align-items: center;
            }
            .iconBox {
                width: 30px;
                height: 30px;
                display: flex;
                margin-right: 3px;
                justify-content: center;
                align-items: center;
                i {
                    width: 26px;
                    height: 26px;
                    font-size: 14px;
                    border-radius: 100%;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .InApplication {
                display: inline-block;
                color: #4fc277;
                font-size: 14px;
                padding: 2px 7px;
                background-color: #edfff3;
            }
            .notUsed {
                display: inline-block;
                color: #939798;
                font-size: 14px;
                padding: 2px 7px;
                background-color: #f4f6f8;
            }
        }
    }
    .pages {
        display: flex;
        justify-content: flex-end;
    }
}
</style>
